<template>
  <div class="dashboard-editor-container type-box">
    <el-card class="box-card">
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <el-form-item label="上报院区" prop="nodeName">
          <el-select
            v-model="listQuery.hospital"
            placeholder=""
            size="small"
            clearable
            style="width: 180px"
            @change="getList"
          >
            <el-option label="闵行院区" value="闵行院区" />
            <el-option label="徐汇院区" value="徐汇院区" />
          </el-select>
        </el-form-item>
        <el-form-item label="上报时间">
          <el-date-picker
            v-model="timeValue"
            clearable
            size="small"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="card-list flex flex-row align-center">
        <div class="flex flex-row align-center width130">
          <div
            class="card-box flex flex-row align-center"
            :class="currentType == 'yzcd' ? 'active' : ''"
            @click="switchType('yzcd')"
          >
            <div class="flex-auto">
              <div class="title">按严重程度</div>
            </div>
          </div>
        </div>
        <div class="flex flex-row align-center width130">
          <div
            class="card-box flex flex-row align-center"
            :class="currentType == 'fspl' ? 'active' : ''"
            @click="switchType('fspl')"
          >
            <div class="flex-auto">
              <div class="title">按发生频率</div>
            </div>
          </div>
        </div>
        <div class="flex flex-row align-center width160">
          <div
            class="card-box flex flex-row align-center"
            :class="currentType == 'sac' ? 'active' : ''"
            @click="switchType('sac')"
          >
            <div class="flex-auto">
              <div class="title">按SAC分级总分</div>
            </div>
          </div>
        </div>
        <div class="flex flex-row align-center width160">
          <div
            class="card-box flex flex-row align-center"
            :class="currentType == 'dept' ? 'active' : ''"
            @click="switchType('dept')"
          >
            <div class="flex-auto">
              <div class="title">按病区</div>
            </div>
          </div>
        </div>

      </div>
      <el-table
        v-if="currentType == 'yzcd'"
        v-loading="loading"
        border
        :data="ticketList"
        :header-cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="严重程度" prop="name" :show-overflow-tooltip="true" align="center" min-width="160" />
        <el-table-column :label="`合计(${getYzcdTotal(yzcdTop)})`" prop="wtx" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">{{ getYzcdTotal(scope.row) }}</template>
        </el-table-column>
        <el-table-column :label="`未填写(${yzcdTop.wtx})`" prop="wtx" :show-overflow-tooltip="true" align="center" width="140" />
        <el-table-column :label="`轻微/无伤害(${yzcdTop.wsh})`" prop="wsh" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`轻度(${yzcdTop.qd})`" prop="qd" :show-overflow-tooltip="true" align="center" width="140" />
        <el-table-column :label="`中度(${yzcdTop.zd})`" prop="zd" :show-overflow-tooltip="true" align="center" width="140" />
        <el-table-column :label="`重度(${yzcdTop.zds})`" prop="zds" :show-overflow-tooltip="true" align="center" width="140" />
        <el-table-column :label="`极重度(${yzcdTop.jzd})`" prop="jzd" :show-overflow-tooltip="true" align="center" width="140" />
        <el-table-column :label="`死亡(${yzcdTop.sw})`" prop="sw" :show-overflow-tooltip="true" align="center" width="140" />

      </el-table>
      <el-table
        v-if="currentType == 'fspl'"
        v-loading="loading"
        border
        :data="ticketList"
        :header-cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="发生频率" prop="name" :show-overflow-tooltip="true" align="center" min-width="160" />
        <el-table-column :label="`合计(${getFsplTotal(yzcdTop)})`" prop="wtx" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">{{ getFsplTotal(scope.row) }}</template>
        </el-table-column>
        <el-table-column :label="`未填写(${yzcdTop.plwtx})`" prop="plwtx" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`数周内(${yzcdTop.plszn})`" prop="plszn" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`一年数次(${yzcdTop.plynsc})`" prop="plynsc" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`1-2年1次(${yzcdTop.pl12nyc})`" prop="pl12nyc" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`2-5年1次(${yzcdTop.pl25nyc})`" prop="pl25nyc" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`五年以上(${yzcdTop.pl5nys})`" prop="pl5nys" :show-overflow-tooltip="true" align="center" width="160" />

      </el-table>
      <el-table
        v-if="currentType == 'sac'"
        v-loading="loading"
        border
        :data="ticketList"
        :header-cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="SAC分级总分" prop="name" :show-overflow-tooltip="true" align="center" min-width="160" />
        <el-table-column :label="`合计(${getSacTotal(yzcdTop)})`" prop="wtx" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">{{ getSacTotal(scope.row) }}</template>
        </el-table-column>
        <el-table-column :label="`未填写(${yzcdTop.sacwtx})`" prop="sacwtx" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`1分(${yzcdTop.sac1})`" prop="sac1" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`2分(${yzcdTop.sac2})`" prop="sac2" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`3分(${yzcdTop.sac3})`" prop="sac3" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`4分(${yzcdTop.sac4})`" prop="sac4" :show-overflow-tooltip="true" align="center" width="160" />

      </el-table>
      <!-- <el-table v-if="currentType == 'dept'" v-loading="loading" border
        :data="bqInfoList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"> -->
      <el-table v-if="currentType == 'dept'" v-loading="loading" border :data="bqInfoList" :header-cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
        <el-table-column
          label="病区名称"
          prop="name"
          :show-overflow-tooltip="true"
          align="center"
          min-width="160"
          fixed="left"
        />
        <el-table-column :label="`合计(${getBqsjTotal('all')})`" prop="all" :show-overflow-tooltip="true" align="center" width="120" />
        <el-table-column :label="`医疗处置事件(${getBqsjTotal('ylcz')})`" prop="ylcz" :show-overflow-tooltip="true" align="center" width="160" />
        <el-table-column :label="`报告、标本差错事件(${getBqsjTotal('bbcc')})`" prop="bbcc" :show-overflow-tooltip="true" align="center" width="200" />
        <el-table-column :label="`饮食差错事件(${getBqsjTotal('yscc')})`" prop="yscc" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`输液反应事件(${getBqsjTotal('syfy')})`" prop="syfy" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`其他不良事件(${getBqsjTotal('qtblsj')})`" prop="qtblsj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`用血错误事件(${getBqsjTotal('yxcw')})`" prop="yxcw" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`输血反应事件(${getBqsjTotal('sxfy')})`" prop="sxfy" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`院内感染事件(${getBqsjTotal('ygxg')})`" prop="ygxg" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`手术不良事件(${getBqsjTotal('ssbl')})`" prop="ssbl" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`操作不良事件(${getBqsjTotal('czbl')})`" prop="czbl" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`非计划再次手术事件(${getBqsjTotal('fjhzcss')})`" prop="fjhzcss" :show-overflow-tooltip="true" align="center" width="200" />
        <el-table-column :label="`职业暴露不良事件(${getBqsjTotal('fbxg')})`" prop="fbxg" :show-overflow-tooltip="true" align="center" width="190" />
        <el-table-column :label="`跌倒、坠床事件(${getBqsjTotal('ddzc')})`" prop="ddzc" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`出走事件(${getBqsjTotal('czsj')})`" prop="czsj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`冲动伤人事件(${getBqsjTotal('cdsr')})`" prop="cdsr" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`噎食事件(${getBqsjTotal('yssj')})`" prop="yssj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`自杀、自伤事件(${getBqsjTotal('zszs')})`" prop="zszs" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`其他意外事件(${getBqsjTotal('qtywsj')})`" prop="qtywsj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`医疗器械事件(${getBqsjTotal('ylqx')})`" prop="ylqx" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`公共事件(${getBqsjTotal('ggsj')})`" prop="ggsj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`治安事件(${getBqsjTotal('zasj')})`" prop="zasj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`其他事件(${getBqsjTotal('qtsj')})`" prop="qtsj" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`医患沟通相关(${getBqsjTotal('yhgt')})`" prop="yhgt" :show-overflow-tooltip="true" align="center" width="170" />
        <el-table-column :label="`药物不良反应事件(${getBqsjTotal('ywbl')})`" prop="ywbl" :show-overflow-tooltip="true" align="center" width="200" />
        <el-table-column :label="`给药错误事件(${getBqsjTotal('gycw')})`" prop="gycw" :show-overflow-tooltip="true" align="center" width="180" />

      </el-table>
      <!-- <div class="pagination-container">
        <el-pagination :background="true" :current-page.sync="currentPage" :page-size.sync="pagesize"
          layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5, 10, 20, 30, 50]" :total="todoTotal"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div> -->
    </el-card>
  </div>
</template>
<script>
import {
  statisticsYzcd
} from '@/api/baqsj/statistics'
export default {
  name: 'BaqsjStatistics',
  components: {
  },
  data() {
    return {
      timeValue: '',
      yzcdTop: {
        name: '合计',
        wtx: 0,
        wsh: 0,
        qd: 0,
        zd: 0,
        zds: 0,
        jzd: 0,
        sw: 0,
        plwtx: 0,
        plszn: 0,
        plynsc: 0,
        pl12nyc: 0,
        pl25nyc: 0,
        pl5nys: 0,
        sacwtx: 0,
        sac1: 0,
        sac2: 0,
        sac3: 4,
        sac4: 0
      },
      currentType: 'yzcd',
      dialogVisible: false,
      todoTotal: 0,
      currentPage: 1,
      pagesize: 100,
      loading: false,
      ticketList: [],
      bqInfoList: [],
      listQuery: {
        hospital: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getYzcdTotal(row) {
      return row.wtx + row.wsh + row.qd + row.zd + row.zds + row.jzd + row.sw
    },
    getFsplTotal(row) {
      return row.wtx + row.plwtx + row.plszn + row.plynsc + row.pl12nyc + row.pl25nyc + row.pl5nys
    },
    getSacTotal(row) {
      return row.wtx + row.sacwtx + row.sac1 + row.sac2 + row.sac3 + row.sac4
    },
    getBqsjTotal(model) {
      let count = 0
      for (let i = 0; i < this.bqInfoList.length; i++) {
        count += this.bqInfoList[i][model]
      }
      return count
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    switchType(type) {
      this.currentType = type
      this.currentPage = 1
      this.pagesize = 10
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },
    getList() {
      this.loading = true
      this.currentPage = 1
      this.pagesize = 10
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = this.parseTime(this.timeValue[0])
        this.listQuery.endTime = this.parseTime(this.timeValue[1])
      }
      statisticsYzcd(this.listQuery).then(response => {
        const yzcdList = response.data.yzcdList
        this.yzcdTop = yzcdList[0]
        yzcdList.shift()
        this.ticketList = yzcdList
        this.bqInfoList = response.data.bqInfoList
        this.todoTotal = this.ticketList && this.ticketList.length
        this.loading = false
      })
    },
    handleSelectionChange() { }
  }
}

</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.type-box {
  padding: 10px 5px;

  .card-box {
    background: #fff;
    border-radius: 8px;
    margin: 0px 20px 10px 0px;
    padding: 10px 10px;
    position: relative;
    top: 0;
    min-height: 40px;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
    right: 0;
    flex: 1;
    transition: 0.2s all ease;
    text-align: center;
    border: 1px solid #277fd6;

    .title {
      font-size: 15px;
      color: #277fd6;
    }

    .label {
      font-size: 15px;
      color: #97A2B0;
    }

    &.active {
      background: #277fd6;

      .title {
        font-size: 15px;
        font-weight: bold;
        color: #fff;
      }
    }

    // &:hover {
    //     top: -3px;
    //     right: -1px;
    //     -webkit-box-shadow: 0 7px 15px 0 rgb(0 0 0 / 20%);
    //     box-shadow: 0 7px 15px 0 rgb(0 0 0 / 20%);
    //     cursor: pointer;
    // }
  }
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}
</style>
